<template>
  <el-menu default-active="1-4-1"
           class="el-menu-vertical-demo"
           @open="handleOpen"
           @close="handleClose"
           :collapse="isCollapse()"
           background-color="#545c64"
           text-color="#fff"
           active-text-color="#ffd04b"
           :unique-opened="true">
    <h3>{{ isCollapse()? '疫物': '疫物后台管理系统' }}</h3>
    <!--没有子菜单的-->
    <el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :key="item.menuId" :index="item.orderNum.toString()">
      <i :class="`el-icon-${item.icon}`"></i>
      <span slot="title">{{ item.menuName }}</span>
    </el-menu-item>
    <!--有子菜单的-->
    <el-submenu  v-for="item in hasChildren" :key="item.menuId" :index="item.menuId.toString()">
      <template slot="title">
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{ item.menuName }}</span>
      </template>
      <el-menu-item-group v-for="menu in item.menus" :key="menu.menuId">
        <el-menu-item  @click="clickMenu(menu)" :index="menu.menuId.toString()"><i :class="`el-icon-${menu.icon}`"></i>{{ menu.menuName }}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
  import Cookie from "js-cookie";
    export default {
        data() {
            return {
                /*menuData:[
                    {
                        path:'/',
                        name:'home',
                        label:'首页',
                        icon:'s-home',
                        url:'Home/Home'
                    },{
                        path:'/mall',
                        name:'mall',
                        label:'商品管理',
                        icon:'video-play',
                        url:'MallManage/MallManage'
                    },{
                        path:'/user',
                        name:'user',
                        label:'用户管理',
                        icon:'user',
                        url:'UserManage/UserManage'
                    },{
                        label:"其他",
                        icon:"location",
                        children:[
                            {
                                path:'/page1',
                                name:'page1',
                                label:'页面1',
                                icon:'setting',
                                url:'Other/PageOne'
                            },{
                                path:'/page2',
                                name:'page2',
                                label:'页面2',
                                icon:'setting',
                                url:'Other/PageTwo'
                            }
                        ]
                    }
                ]*/
            };
        },
        methods: {
            //打卡折叠的菜单
            handleOpen(key, keyPath) {
                //console.log(key, keyPath);
            },
            //关闭折叠的菜单
            handleClose(key, keyPath) {
                //console.log(key, keyPath);
            },
            clickMenu(item){
                //console.log(item);
                //当页面的路由与跳转的路由不一致的时候才可以跳转
                if (item.url=='' || item==null){
                    return ;
                }
                //如果flag为false则说明这个路径在路由中不存在
                let flag=this.isRouter(item);
                if (flag && this.$route.path != item.url && !(this.$route.path ==="/home" && item.url ==="/")){
                    this.$router.push(item.url);
                }
                this.$store.commit("selectMenu", item);
                this.$store.commit("selectTag", item);
            },
            isCollapse(){
                return this.$store.state.tab.isCollapse;
            },
            isRouter(item){
                let flag=false;
                this.$router.getRoutes().forEach((itm)=>{
                    if (item.url==itm.path){
                        flag=true;
                    }
                });
                return flag;
            }
        },
        //这里面的方法只会在页面加载的时候调用，在刷新也不会调用
        computed:{
            //没有子菜单
            noChildren(){
                //menuData.filter:遍历menuData中的数据，item为menuData中的一个对象，=>后面跟着判断条件，如果
                //菜单不能是按钮
                return this.menuData.filter(item => !item.menus && item.type==1);
            },
            //有子菜单
            hasChildren(){
                return this.menuData.filter(item => item.menus && item.type==0);
            },
            //获取菜单列表
            menuData(){
                //JSON.parse(json字符串),这个方法的作用是将json字符串还原为之前转化的对象
                //该思路是：去缓存（Cookie）中获取菜单，没有的话就获取store中的
                //return JSON.parse(Cookie.get("menu")) || this.$store.state.tab.menu;
                return JSON.parse(sessionStorage.getItem("menu")) || this.$store.state.tab.menu;
            }
        }
    }
</script>

<style lang="less" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu{
    height: 100vh;
    border-right: none;
    h3{
      color: #ffd04b;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      font-weight: 400;
    }
  }
</style>
